<template>
  <div :class="['operate-btn', type]" @click.stop="$emit('click')">
    <i v-if="iconClass" :class="['iconfont', iconClass]"></i>
    {{ label }}
  </div>
</template>

<script>
export default {
  name: 'operateBtn',
  props: {
    type: String,
    text: String
  },
  data () {
    return {
      showHeader: false
    }
  },
  computed: {
    label () {
      if (this.text) return this.text
      switch (this.type) {
      case 'detail': return '详情'
      case 'edit': return '回访'
      case 'delete': return '退回'
      case 'handle': return '分配'
      case 'qrcode': return '指派给他人'
      case 'personDetail': return '确认订单'
      case 'xcmcode': return '行程码'
      case 'jkmcode': return '健康码'
      case 'carManage': return '处理反馈'
      default: return ''
      }
    },
    iconClass () {
      switch (this.type) {
      case 'detail': return 'iconchebaomu_huaban1fuben15'
      case 'personDetail': return 'iconchebaomu_huaban1fuben15'
      case 'carManage': return 'iconchebaomu_huaban1fuben2'
      case 'edit': return 'iconchebaomu-12'
      case 'delete': return 'iconchebaomu-13'
      case 'handle': return 'iconchebaomu-14'
      case 'qrcode': return 'iconchebaomu_huaban1fuben9'
      case 'xcmcode': return 'iconchebaomu_huaban1fuben9'
      case 'jkmcode': return 'iconchebaomu_huaban1fuben9'
      default: return ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.operate-btn {
  display: inline-block;
  width: 70px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
}

.personDetail,
.carManage {
  width: 85px;
}

.qrcode {
  width: 95px;
}

.detail,
.personDetail {
  background: #94be00;
}

.edit,
.qrcode,
.handle,
.xcmcode,
.jkmcode,
.carManage {
  background: #3599f3;
}

.delete {
  background: #f75757;
}
</style>
<style lang="scss">
.operate-btn + .operate-btn {
  margin-left: 12px;
}
</style>
